<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奔跑吧小绵羊</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            background-color: darkseagreen;
            display: flex;
        }
        div {
            width: 162.75px;
            height: 117px;
            /* background-color: darkseagreen; */
            background-image: url(./images/sheep.png);
            /* //调用run 动画;执行速度，执行次数，循环 */
            animation: run .5s steps(7) infinite, move 10s linear infinite;
            position: relative;
            bottom:0;
        }

        /* @keyframes关键帧 */
        @keyframes run {

            /* 定义原地踏步 */
            0% {
                background-position-x: 0%;
            }

            100% {
                background-position-x: 100%;
            }
        }

        @keyframes move {

            /* 定义动画，水平运动 */
            0% {
                transform: translateX(1366px);
            }

            100% {
                transform: translateX(-200px);
            }
        }

        /* 鼠标在小羊身上按下--暂停动画 */
        div:active {
            animation-play-state: paused;
            /* 往上走到盒容器的底部 */
            background-position-y: 100%;
        }

        /* 第二只羊延迟执行 */
        .sheep2 {
            animation-delay: 0s, -1s;
        }

        .sheep3,
        .sheep5 {
            /* 控制第三，五只羊的速度 */
            animation-duration: 1s, 7s;
        }
    </style>
</head>

<body>
    <div class="sheep1"></div>
    <div class="sheep2"></div>
    <div class="sheep3"></div>
    <div class="sheep4"></div>
    <div class="sheep5"></div>
</body>

</html>